<template>
  <div class="current-time">当前时间：{{ currentTime }}</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

defineOptions({
  name: 'TimeDisplay'
});

const currentTime = ref('');
let timer: number | null = null;

const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

onMounted(() => {
  updateTime();
  timer = window.setInterval(updateTime, 1000);
});

onUnmounted(() => {
  if (timer !== null) {
    clearInterval(timer);
    timer = null;
  }
});
</script> 
<style scoped>
.current-time {
  font-size: 16px;
  color: #fff;
  font-family: 'DS-Digital', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(0, 183, 255, 0.7);
} 
</style>